<template>
  <view class="container">
    <ve-card type="none" title="个人信息">
      <ve-cell label="姓名">{{ record.memberName || '-' }}</ve-cell>
      <ve-cell label="手机号">{{ record.phone || '-' }}</ve-cell>
      <ve-cell label="性别">{{ record.sexName || '-' }}</ve-cell>
      <ve-cell label="所属企业">{{ record.clientName || '-' }}</ve-cell>
      <ve-cell label="电子合同认证状态">
        <text :class="'contract-status_' + record.ecAuthenticationStatus">{{ record.ecAuthenticationStatusName }}</text>
      </ve-cell>
      <view v-if="record.ecAuthenticationStatus == 0" class="status_reason c1 fw400 fs30">
        <view>原因：</view>
        <view v-if="record.authenticationFailedReason">{{ record.authenticationFailedReason || '-' }}</view>
      </view>
    </ve-card>

    <ve-card title="紧急联系人" type="none">
      <ve-cell label="姓名">{{ record.emergencyContactName || '-' }}</ve-cell>
      <ve-cell label="手机号">{{ record.emergencyContactPhone || '-' }}</ve-cell>
    </ve-card>

    <ve-card title="证件上传" type="none">
      <view class="credentials_content">
        <view class="credentials_item">
          <image v-if="idFrontOpenUrl" :src="idFrontOpenUrl" class="card_style" @click="handlePreviewId(idFrontOpenUrl)" />
          <div v-else>
            <image src="../../../../../static/images/empty.png" class="empty_img" />
            <p class="empty_text">暂无数据</p>
          </div>
        </view>
        <view class="credentials_item">
          <image v-if="idBackOpenUrl" :src="idBackOpenUrl" class="card_style" @click="handlePreviewId(idBackOpenUrl)" />
          <div v-else>
            <image src="../../../../../static/images/empty.png" class="empty_img" />
            <p class="empty_text">暂无数据</p>
          </div>
        </view>
      </view>
      <ve-cell label="证件类型">{{ record.cardTypeName || '-' }}</ve-cell>
      <ve-cell label="证件号">{{ record.cardNumber || '-' }}</ve-cell>
      <ve-cell label="证件住址">{{ record.cardAddress || '-' }}</ve-cell>
      <ve-cell label="证件到期日">{{
        record.identityLong == 1 ? '长期' : record.identityExpireTime ? record.identityExpireTime : '-'
      }}</ve-cell>
    </ve-card>

    <ve-card title="驾驶证" type="none">
      <view class="credentials_content">
        <view class="credentials_item">
          <image v-if="driverFrontOpenUrl" :src="driverFrontOpenUrl" class="card_style" @click="handlePreviewDriver(driverFrontOpenUrl)" />
          <div v-else>
            <image src="../../../../../static/images/empty.png" class="empty_img" />
            <p class="empty_text">暂无数据</p>
          </div>
        </view>
        <view class="credentials_item">
          <image v-if="driverBackOpenUrl" :src="driverBackOpenUrl" class="card_style" @click="handlePreviewDriver(driverBackOpenUrl)" />
          <div v-else>
            <image src="../../../../../static/images/empty.png" class="empty_img" />
            <p class="empty_text">暂无数据</p>
          </div>
        </view>
      </view>
      <ve-cell label="驾驶证号">{{ record.driverNumber || '-' }}</ve-cell>
      <ve-cell label="驾驶证到期日">{{
        record.driverLong == 1 ? '长期' : record.driverExpireTime ? record.driverExpireTime : '-'
      }}</ve-cell>
    </ve-card>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { memberDetail, getFileInfo } from '@/api/market/member'
  import { ref } from 'vue'

  const record = ref({})
  onLoad((id) => {
    console.log(id.id)
    if (id) {
      getDetail(id)
    }
  })

  const idFrontOpenUrl = ref('')
  const idBackOpenUrl = ref('')
  const driverFrontOpenUrl = ref('')
  const driverBackOpenUrl = ref('')
  const getDetail = async (id) => {
    console.log(id.id)
    const res = await memberDetail({ id: id.id })
    if (res.code === 200) {
      const data = res.result
      record.value = data
      if (data.idCardFrontFileId) {
        getFileInfoApi('idFront', data.idCardFrontFileId)
      }
      if (data.idCardReverseFileId) {
        getFileInfoApi('idBack', data.idCardReverseFileId)
      }
      if (data.driverFrontFileId) {
        getFileInfoApi('driverFront', data.driverFrontFileId)
      }
      if (data.driverReverseFileId) {
        getFileInfoApi('driverBack', data.driverReverseFileId)
      }
    }
  }

  const getFileInfoApi = (way, id) => {
    if (id) {
      getFileInfo({ id: id }).then((res) => {
        if (res.code == 200) {
          let result = res.result
          if (way == 'idFront') {
            idFrontOpenUrl.value = result.openUrl
          }
          if (way == 'idBack') {
            idBackOpenUrl.value = result.openUrl
          }
          if (way == 'driverFront') {
            driverFrontOpenUrl.value = result.openUrl
          }
          if (way == 'driverBack') {
            driverBackOpenUrl.value = result.openUrl
          }
        }
      })
    }
  }

  const handlePreviewId = (url) => {
    const urls = []
    if (idFrontOpenUrl.value) {
      urls.push(idFrontOpenUrl.value)
    }
    if (idBackOpenUrl.value) {
      urls.push(idBackOpenUrl.value)
    }
    uni.previewImage({
      current: url,
      urls,
    })
  }
  const handlePreviewDriver = (url) => {
    const urls = []
    if (driverFrontOpenUrl.value) {
      urls.push(driverFrontOpenUrl.value)
    }
    if (driverBackOpenUrl.value) {
      urls.push(driverBackOpenUrl.value)
    }
    uni.previewImage({
      current: url,
      urls,
    })
  }
</script>

<style lang="less" scoped>
  .container {
    width: 100vw;
    height: auto;
    background: #f7f8fa;
    padding: 24rpx;
  }
  .credentials_content {
    display: flex;
    justify-content: space-between;
    margin-top: 32rpx;

    .credentials_item {
      width: 284rpx;
      height: 184rpx;
      background: #f6f8fe;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      opacity: 0.5239;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .card_style {
      width: 284rpx;
      height: 184rpx;
    }
    .empty_img {
      width: 53rpx;
      height: 51rpx;
      margin-left: 22rpx;
    }
    .empty_text {
      font-size: 24rpx;
      font-weight: 400;
      color: #b6b6b6;
    }
  }
  .contract-status_-1 {
    color: #f53f3f;
  }
  .contract-status_0 {
    color: #f53f3f;
  }
  .contract-status_1 {
    color: #00b42a;
  }
  .contract-status_2 {
    color: #ff7d00;
  }
  .status_reason {
    background-color: #f7f8fa;
    padding: 24rpx;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    view:nth-child(1) {
      min-width: 80rpx;
    }
    view:nth-child(2) {
      flex: 1;
    }
  }
</style>
